<table class="table table-striped">
    <thead>
        <tr>
            <th>Droits</th>
            <th>Groupes Autorisés</th>
        </tr>
    </thead>
    <tbody>
        <?php foreach ($rights as $right) { ?>
            <tr>
                <td><span data-idRight="<?php echo $right['right_id']; ?>"><?php echo $right['right_text']; ?></span></td>
                <td>
                    <select class="selectRight" multiple data-idRight="<?php echo $right['right_id']; ?>" data-placeholder="Sélectionner les groupes ..." style="width: 450px;">
                        <?php foreach ($right['groups'] as $group) { ?>
                            <?php if ($group['group_allowed']) $selected = 'selected="selected"'; else $selected = ''; ?>
                            <option <?php echo $selected; ?> value="<?php echo $group['group_id']; ?>"><?php echo $group['group_libelle']; ?></option>
                        <?php } ?>
                    </select>
                </td>
            </tr>
        <?php } ?>
    </tbody>
</table>

<button class="saveRights btn btn-success">Enregistrer les changements</button>
<button class="cancel btn btn-danger">Annuler</button>
<button class="addRight btn btn-primary">Ajouter un droit</button>

<div class="modal_addRight" style="display:none;">
    <label>Nom du droit :</label>
    <input type="text" name="nameRight"/><br /><br />
    <label>Valeur du droit :</label>
    <input type="text" name="valueRight"/>
</div>

<script>
    $(document).ready(function() {
        $('select').chosen();
        
        $('button.cancel').on('click', function(e) {
            e.preventDefault();
            $(location).attr('href', $(location).attr('href'));
        });
        
        $('button.saveRights').on('click', function(e) {
            e.preventDefault();
            var tmp = new Array();
            $.each($('select.selectRight'), function(j,k) {
                tmp[$('select.selectRight').eq(j).attr('data-idright')] = $(this).val();
            });
            
            $.ajax({
                type:"POST",
                url : site_url+"droit/saveChanges",
                data : {
                    data : tmp
                },
                success: function(e) {
                    alert('Les changements ont bien été modifiés.')
                    $(location).attr('href', $(location).attr('href'));
                },
                error: function(e) {
                    alert(e.responseText);
                }
            });
        });
        
        $('button.addRight').on('click', function(e) {
            e.preventDefault();
            $('div.modal_addRight').dialog({
                modal: true,
                buttons: {
                    "Valider": function() {
                        addRight();
                    },
                    "Annuler": function() {
                        $(this).dialog('close');
                    }
                }
            });
        });
    });
    function addRight() {
        var nameRight = $('input[name=nameRight]').val();
        var valueRight = $('input[name=valueRight]').val();
        
        $.ajax({
            type : "POST",
            url : site_url+"droit/addRight",
            data : {
                name : nameRight,
                value : valueRight
            }, success: function(e) {
                alert('Le droit à été ajouté avec succès.')
                $(location).attr('href', $(location).attr('href'));
            }, error: function(e) {
                
            }
        });
    }
</script>